<template>
  <view
    class="login-container pageBg"
    :style="{ paddingTop: statusBarHeight + 'px' }"
  >
    <view class="login-content">
      <!-- 标题 -->
      <view class="login-title">
        <text class="subtitle-text" style="margin-bottom: 20rpx"
          >登录后可进行更多功能</text
        >
        <text class="title-text">用户登录</text>
        <text class="subtitle-text">请输入您的用户名和密码</text>
      </view>

      <!-- 登录表单 -->
      <view class="login-form">
        <view class="form-item">
          <view class="input-label">用户名</view>
          <input
            class="form-input"
            type="text"
            v-model="loginForm.username"
            placeholder="请输入用户名"
            :disabled="loading"
          />
        </view>

        <view class="form-item">
          <view class="input-label">密码</view>
          <input
            class="form-input"
            type="password"
            v-model="loginForm.password"
            placeholder="请输入密码"
            :disabled="loading"
          />
        </view>

        <!-- 登录按钮 -->
        <button
          class="login-btn"
          :class="{ loading: loading }"
          @click="handleLogin"
          :disabled="loading || !canLogin"
        >
          <text v-if="!loading">登录</text>
          <text v-else>登录中...</text>
        </button>

        <view class="register-link">
          <text>忘记账号或密码？</text>
          <text class="link-text">请联系管理员</text>
        </view>
      </view>

      <view v-if="errorMessage" class="error-message">
        <text>{{ errorMessage }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useUserStore } from "@/stores/user";

// 用户store
const userStore = useUserStore();

// 系统信息
const statusBarHeight = ref(0);

// 登录表单数据
const loginForm = ref({
  username: "",
  password: "",
});

// 加载状态
const loading = ref(false);

// 错误信息
const errorMessage = ref("");

// 计算属性：是否可以登录
const canLogin = computed(() => {
  return loginForm.value.username.trim() && loginForm.value.password.trim();
});

// 获取系统信息
const getSystemInfo = () => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight || 20;

      // #ifdef MP-WEIXIN
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      if (menuButtonInfo) {
        const navBarHeight =
          statusBarHeight.value +
          menuButtonInfo.height +
          (menuButtonInfo.top - statusBarHeight.value) * 2;
        statusBarHeight.value = navBarHeight - 40;
      }
      // #endif
    },
    fail: (err) => {
      console.error("获取系统信息失败:", err);
      statusBarHeight.value = 44;
    },
  });
};

// 处理登录
const handleLogin = async () => {
  if (!canLogin.value || loading.value) return;

  // 清除之前的错误信息
  errorMessage.value = "";
  loading.value = true;

  try {
    const result = await userStore.login(loginForm.value);

    if (result.success) {
      // 登录成功
      uni.showToast({
        title: "登录成功",
        icon: "success",
        duration: 1500,
      });

      // 延迟跳转，让用户看到成功提示
      setTimeout(() => {
        // 跳转到首页
        uni.reLaunch({
          url: "/pages/wenjuan/wenjuan",
        });
      }, 1500);
    } else {
      // 登录失败
      errorMessage.value = result.error || "登录失败，请重试";
      uni.showToast({
        title: result.error || "登录失败",
        icon: "none",
        duration: 2000,
      });
    }
  } catch (error) {
    console.error("登录异常:", error);
    errorMessage.value = "网络错误，请检查网络连接";
    uni.showToast({
      title: "网络错误",
      icon: "none",
      duration: 2000,
    });
  } finally {
    loading.value = false;
  }
};

// 页面加载时获取系统信息
onMounted(() => {
  getSystemInfo();

  // 如果已经登录，直接跳转
  if (userStore.isAuthenticated) {
    uni.reLaunch({
      url: "/pages/wenjuan/wenjuan",
    });
  }
});
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-content {
  width: 100%;
  max-width: 600rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10rpx);
}

.login-title {
  text-align: center;
  margin-bottom: 60rpx;
}

.title-text {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.subtitle-text {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.login-form {
  .form-item {
    margin-bottom: 40rpx;
  }

  .input-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    font-weight: 500;
  }

  .form-input {
    width: 100%;
    height: 88rpx;
    background: #f8f9fa;
    border: 2rpx solid #e9ecef;
    border-radius: 12rpx;
    padding: 0 24rpx;
    font-size: 30rpx;
    color: #333;
    box-sizing: border-box;
    transition: all 0.3s ease;

    &:focus {
      border-color: #667eea;
      background: #fff;
      box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
    }

    &::placeholder {
      color: #999;
    }

    &:disabled {
      background: #f5f5f5;
      color: #999;
    }
  }

  .login-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    margin-top: 40rpx;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    &:not(:disabled):active {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
    }

    &:disabled {
      opacity: 0.6;
      transform: none;
    }

    &.loading {
      opacity: 0.8;
    }
  }

  .register-link {
    text-align: center;
    margin-top: 40rpx;
    font-size: 28rpx;
    color: #666;

    .link-text {
      color: #667eea;
      font-weight: 500;
      margin-left: 10rpx;
    }
  }
}

.error-message {
  margin-top: 30rpx;
  padding: 20rpx;
  background: #fee;
  border: 2rpx solid #fcc;
  border-radius: 8rpx;
  text-align: center;

  text {
    color: #c33;
    font-size: 26rpx;
  }
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .login-content {
    padding: 40rpx 30rpx;
  }

  .title-text {
    font-size: 42rpx;
  }
}
</style>
